<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#wrap {
				width: 900px;
				margin: 0 auto;
			}
			
			#nav {
				width: 900px;
				height: 100px;
			}
			
			#nav img {
				width: 200px;
				height: 100px;
			}
			
			#nav_left {
				width: 200px;
				height: 100px;
				float: left;
			}
			
			#nav_left img {
				width: 200px;
				height: 100px;
				margin-top: 1px;
			}
			
			#nav_right {
				width: 700px;
				height: 100px;
				display: inline-block;
			}
			
			.nav_s {
				font-size: 12px;
				color: black;
			}
			
			#nav_right .nav_s {
				margin-left: 10px;
			}
			
			#nav_select {
				width: 215px;
				height: 22px;
				float: right;
				margin-right: 10px;
				outline: none;
			}
			
			.gang {
				float: right;
				margin-top: 2px;
				margin-right: 14px;
				font-size: 10px;
				color: black;
				font-weight: bolder;
			}
			
			.sublink a {
				margin-top: 2px;
				text-decoration: none;
				font-size: 13px;
				color: darkgreen;
				float: right;
				font-weight: bolder;
			}
			
			#nav_top {
				width: 700px;
				height: 30px;
				margin-top: 5px;
			}
			
			#nav_bottom {
				width: 700px;
				height: 50px;
				position: relative;
			}
			
			#nav_bottom img {
				width: 700px;
				height: 35px;
			}
			
			#nav_li {
				width: 700px;
				float: left;
				position: absolute;
				left: 0;
				top: 5px;
			}
			
			#nav_li li {
				width: 100px;
				height: 30px;
				list-style: none;
				float: left;
				font-size: 14px;
				color: white;
				margin-left: 36px;
				margin-top: 3px;
			}
			
			#nav_li li:hover {
				color: yellow;
			}
			
			#drop_menu {
				position: absolute;
				left: 170px;
				top: 34px;
				display: none;
				z-index: 999999;
			}
			
			#drop_menu li {
				list-style: none;
				width: 200px;
				height: 35px;
				line-height: 35px;
				background: #0ca251;
				text-shadow: 1px 1px 1px #000;
				border: 1px solid lightgrey;
				border-top: 3px solid #349a48;
			}
			
			#drop_menu li a {
				text-decoration: none;
				color: white;
				font-size: 12px;
				margin-left: 5px;
				font-weight: bolder;
			}
			
			#drop_menu li a:hover {
				color: yellow;
			}
			
			#middle {
				width: 900px;
				height: 480px;
				position: relative;
			}
			
			#middle_left {
				width: 610px;
				float: left;
				background-color: blue;
			}
			
			.middle_left_img1 {
				width: 610px;
				float: left;
			}
			
			#middle_right {
				width: 270px;
				float: right;
				margin-left: 10px;
			}
			
			.menu-right {
				float: right;
				width: 280px;
			}
			
			.submenu {
				float: right;
				width: 280px;
			}
			
			.submenu li {
				list-style: none;
			}
			
			#right_menu_title {
				width: 280px;
				height: 40px;
				border-bottom: 1px solid gainsboro;
				background-color: white;
			}
			
			.menu-title {
				font-weight: bolder;
				color: limegreen;
				margin-left: 10px;
				line-height: 45px;
				text-decoration: none;
			}
			
			.menu-noactivate {
				color: limegreen;
				margin-left: 10px;
				line-height: 45px;
				text-decoration: none;
			}
			
			#menu-sub-001 {
				width: 280px;
				display: none;
			}
			
			#menu-sub-001 li {
				margin-left: 10px;
				width: 280px;
				height: 20px;
				color: gray;
				/*height: 20px;*/
				font-size: 10px;
				font-weight: bolder;
			}
			
			#weixin {
				width: 250px;
				height: 250px;
				position: absolute;
				left: 660px;
				top: 220px;
			}
			
			.Erweima {
				position: absolute;
				left: 40px;
				top: 20px;
				z-index: 222;
			}
			
			#footer {
				width: 900px;
				height: 200px;
				position: relative;
			}
			
			#footer_bottom {
				width: 900px;
				height: 100px;
				float: left;
				position: relative;
				/*background-color: darkblue;*/
			}
			
			.footer_l_1 {
				width: 195px;
				height: 100px;
				display: inline-block;
				background-image: url(img/box_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_1:hover {
				background-image: url(img/box_0_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_2 {
				display: inline-block;
				width: 195px;
				height: 100px;
				margin-left: 10px;
				background-image: url(img/box_1.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_2:hover {
				background-image: url(img/box_1_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_3 {
				display: inline-block;
				width: 195px;
				height: 100px;
				margin-left: 10px;
				background-image: url(img/box_2.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_3:hover {
				background-image: url(img/box_2_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_r_1 {
				display: inline-block;
				width: 105px;
				height: 100px;
				float: right;
				background-image: url(img/box_4.jpg);
				background-size: 100% 100%;
			}
			
			.footer_r_1:hover {
				background-image: url(img/box_4_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_r_2 {
				display: inline-block;
				width: 105px;
				height: 100px;
			    margin-left: 2px;
				float: right;
				background-image: url(img/box_3.jpg);
				background-size: 100% 100%;
			}
			
			.footer_r_2:hover {
				background-image: url(img/box_3_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_1 {
				width: 195px;
				height: 100px;
				background-image: url(img/box_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_1:hover {
				background-image: url(img/box_0_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_2 {
				width: 195px;
				height: 100px;
				margin-left: 15px;
				background-image: url(img/box_1.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_2:hover {
				background-image: url(img/box_1_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_3 {
				width: 195px;
				height: 100px;
				background-image: url(img/box_2.jpg);
				background-size: 100% 100%;
			}
			
			.footer_l_3:hover {
				background-image: url(img/box_2_0.jpg);
				background-size: 100% 100%;
			}
			#footer_r{
				width: 260px;
				height: 100px;
				float: right;
			}
			.footer_r_1 {
				width: 125px;
				height: 100px;
				float: left;
				background-image: url(img/box_4.jpg);
				background-size: 100% 100%;
			}
			
			.footer_r_1:hover {
				background-image: url(img/box_4_0.jpg);
				background-size: 100% 100%;
			}
			
			.footer_r_2 {
				width: 120px;
				height: 100px;
				background-image: url(img/box_3.jpg);
				background-size: 100% 100%;
			}
			
			.footer_r_2:hover {
				background-image: url(img/box_3_0.jpg);
				background-size: 100% 100%;
			}
			#footer_p{
				position: relative;
				left: 290px;
				top: 0px;
				width: 360px;
				height: 40px;
			}
			#footer_p li{
				list-style: none;
				float: left;
			}
			.footer_p1{
				width: 370px;
				height: 20px;
			}
			.footer_p1 a{
				text-decoration: none;
				color: darkgreen;
				font-size: 12px;
				margin-left: 5px;
			}
			.footer_p2{
				width: 360px;
				height: 20px;
			}
			.footer_p2 li a{
				text-decoration: none;
				color: darkgreen;
				font-size: 12px;
				margin-left: 5px;
			}
			
			.footer_p3{
				position: relative;
				left: 0;
				top:0 ;
				width: 360px;
				height: 40px;
				margin-top: 20px;
			}
			.footer_s1{
				margin-left: 5px;
				font-size: 10px;
				color: black;
			}
			.footer_s2{
				margin-left: 115px;
				font-size: 10px;
				color: black;
			}
			#menu-sub-001 a {
				color: black;
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<!--首页导航区域-->
			<div id="nav">
				<div id="nav_left">
					<img src="img/logo.png" />
				</div>
				<div id="nav_right">
					<div id="nav_top">
						<span class="nav_s">中国</span>
						<span class="sublink"><a href="">进入全球官网</a></span>
						<span class="gang">|</span>
						<select name="" id="nav_select">
							<option value="" id="selectL">Select Language</option>
							<option value="" id="enSelect">English</option>
							<option value="" id="chSelect">Chinese</option>
						</select>
					</div>
					<div id="nav_bottom">
						<img src="img/绿条.png" />
						<ul id="nav_li">
							<li>新闻动态</li>
							<li id="drop_li">
								美食与营养
							</li>
							<li>加盟流程</li>
							<li>关于我们</li>
							<li>快餐店位置查询</li>
						</ul>
						<!--全效果下拉菜单-->
						<ul id="drop_menu">
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=001" onclick="return checklink(&#39;001&#39;)">超值 Value</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=002" onclick="return checklink(&#39;002&#39;)">经典 Classics</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=003" onclick="return checklink(&#39;003&#39;)">精选 Premium</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=004" onclick="return checklink(&#39;004&#39;)">低脂 Low Fat</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=005" onclick="return checklink(&#39;005&#39;)">百味卷 Wrap</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=006" onclick="return checklink(&#39;006&#39;)">沙拉 Salad</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=007" onclick="return checklink(&#39;007&#39;)">聚餐服务 Catering</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=008" onclick="return checklink(&#39;008&#39;)">饮料和小食 Drinks &amp; Sides</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=009" onclick="return checklink(&#39;009&#39;)">早餐 BREAKFAST</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=010" onclick="return checklink(&#39;010&#39;)">营养 Nutrition</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=011" onclick="return checklink(&#39;011&#39;)">如何点餐 How To Order</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--中部区域-->
			<div id="middle">
				<div id="middle_left">
					<img src="img/food.jpg" class="middle_left_img1" />
				</div>
				<div id="middle_right">
					<div class="menu-right">
						<ul class="submenu">
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-title">超值 Value</a>
								</div>
								<ul id="menu-sub-001">
									<li><a href="###"><span>意大利香辣 Spicy Italian</span></a></li>
									<li><a href="###"><span>培根 B.L.T</span></a></li>
									<li><a href="###"><span>火腿 Ham</span></a></li>
									<li><a href="###"><span>新鲜蔬菜 Veggie Delite</span></a></li>
								</ul>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-title">经典 Classics</a>
								</div>
								<ul id="menu-sub-001">
									<li><a href="###"><span>意大利经典 Italian B.M.T.™</span></a></li>
									<li><a href="###"><span>意大利香肠 Italian Sausage</span></a></li>
									<li><a href="###"></a><span>香烤鸡排 Roasted Chicken</span></li>
									<li><a href="###"></a><span>火鸡胸 Turkey Breast</span></li>
									<li><a href="###"></a><span>日式照烧鸡 Chicken Teriyaki</span></li>
								</ul>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="http://www.subway.com.cn/menu.aspx" class="menu-title">精选 Premium</a>
								</div>
								<ul id="menu-sub-001">
									<li><a href="###"><span>金枪鱼</span></a></li>
									<li><a href="###"><span>香热奇士</span></a></li>
									<li><a href="###"><span>香烤牛肉</span></a></li>
									<li><a href="###"><span>奇士牛排</span></a></li>
									<li><a href="###"><span>百味俱乐部</span></a></li>
								</ul>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="http://www.subway.com.cn/menu.aspx" class="menu-title">低脂</a>
								</div>
								<ul id="menu-sub-001">
									<li><a href="###"></a><span>火腿</span></a></li>
									<li><a href="###"></a><span>火鸡胸</span></a></li>
									<li><a href="###"></a><span>香烤鸡排</span></li>
									<li><a href="###"></a><span>香烤牛肉</span></li>
									<li><a href="###"></a><span>百味俱乐部</span></li>
								</ul>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-noactivate">百味卷 Wrap</a>
								</div>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-noactivate">沙拉 Salad</a>
								</div>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-title">聚餐服务 Catering</a>
								</div>
								<ul id="menu-sub-001">
									<li><a href="###"><span>三明治拼盘 Sandwich Platter</span></a></li>
									<li><a href="###"><span>甜饼拼盘 Cookie Platter</span></a></li>
									<li><a href="###"><span>巨型三明治 Giant Sub</span></a></li>
								</ul>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-noactivate">饮料和小食 Drinks &amp; Sides</a>
								</div>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-noactivate">早餐 BREAKFAST</a>
								</div>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-title">营养 Nutrition</a>
								</div>
								<ul id="menu-sub-001">
									<li><a href="###"></a><span>营养问与答 FAQ</span></li>
								</ul>
							</li>
							<li>
								<div id="right_menu_title">
									<a href="###" class="menu-noactivate">如何点餐 How To Order</a>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div id="weixin">
					<img src="img/code.png" class="Erweima" />
				</div>
			</div>
			<!--首页底部区域-->
			<ul id="footer">
				<ul id="footer_bottom">
					<li class="footer_l_1">
						<a href="http://www.subway.com.cn/position.aspx"></a>
					</li>
					<li class="footer_l_2">
						<a href="http://www.subway.com.cn/menu.aspx?d=011"></a>
					</li>
					<li class="footer_l_3">
						<a href="http://www.subway.com.cn/news.aspx?t=1"></a>
					</li>
					<div id="footer_r">
						<li class="footer_r_1">
						<a href="http://weibo.com/login.php"></a>
					</li>
					<li class="footer_r_2"></li>
					</div>
				</ul>
				<ul id="footer_p">
					<ul class="footer_p1">
						<li>
							<a href="">主页</a>
						</li>
						<li>
							<a href="">|</a>
						</li>
						<li>
							<a href="">菜单/营养</a>
						</li>
						<li>
							<a href="">|</a>
						</li>
						<li>
							<a href="">如何加盟</a>
						</li>
						<li>
							<a href="">|</a>
						</li>
						<li>
							<a href="">关于我们</a>
						</li>
						<li>
							<a href="">|</a>
						</li>
						<li>
							<a href="">快餐店位置查询</a>
						</li>
					</ul>
					<ul class="footer_p2">
						<li>
							<a href="">联系我们</a>
						</li>
						<li>
							<a href="">|</a>
						</li>
						<li>
							<a href="">使用权限</a>
						</li>
						<li>
							<a href="">|</a>
						</li>
						<li>
							<a href="">隐私权政策</a>
						</li>
						<li>
							<a href="">|</a>
						</li>
						<li>
							<a href="">SUBWAY Partners™</a>
						</li>
					</ul>
					<div class="footer_p3">
						<span class="footer_s1">SUBWAY® is a Registered Trademark of Subway IP Inc.</span>
						<span class="footer_s2">®2016 Subway IP Inc.</span>
					</div>
				</ul>
		</div>
	</body>
	<script>
		var drop_li = document.getElementById("drop_li");
		var dropMenu = document.getElementById("drop_menu");
		var dropMenuLi = document.querySelectorAll("#drop_menu>li");
		var weixinDiv = document.getElementById("weixin");
		var ErweimaDiv = document.getElementsByClassName("Erweima")[0];
		//下拉菜单
		drop_li.onmouseover = function() {
			dropMenu.style.display = "block";
		}
		drop_li.onmouseout = function() {
			dropMenu.style.display = "none";
		}
		dropMenu.onmouseover = function() {
			dropMenu.style.display = "block";
		}
		dropMenu.onmouseout = function() {
			dropMenu.style.display = "none";
		}
		//二维码
		weixinDiv.onmouseover = function() {
			ErweimaDiv.style.display = "block";
		}
		weixinDiv.onmouseout = function() {
			ErweimaDiv.style.display = "none";
		}
		//右侧点击隐藏
		var right_menu_title = document.getElementById("right_menu_title");
		var menuSub = document.getElementById("menu-sub-001");
		var menu_title = document.getElementsByClassName("menu-title")[0];
		
		var isOn = true;
		menu_title.onclick = function(){
			isOn = !isOn;
			if(isOn == true){
				menuSub.style.display="none";
			}else {
				menuSub.style.display="block";
			}
		}
		
		
	</script>
</html>